<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<script type="text/javascript">
    require([ "dojo/_base/array", "dojo/_base/xhr", "dojo/request", "dojo/topic", "dojo/json" ],
            function(array, xhr, request, topic, JSON) {
                var deletItemsCount = 0;
                phonebookRestForm = function(formId) {
                    dijit.byId(formId).reset();
                    if (formId.indexOf('UFD') != -1) {
                        var rowid = jQuery("#phonebookGird").jqGrid('getGridParam', 'selrow');
                        var phonebook = jQuery("#phonebookGird").jqGrid('getRowData', rowid);
                        dijit.byId('phonebookUFD').setValues(phonebook);
                    }
                };
                topic.subscribe("phonebook/insertOrUpdate", phonebookRestForm);
                var syncDB = function(url, jsonData) {
                    request.post(url, {
                        data : jsonData,
                        headers : {
                            'Content-Type' : "application/json; charset=utf-8"
                        },
                        timeout : 30000
                    }).then(function(response) {
                        topic.publish("notifyMsgTopic", {
                            message : response,
                            type : "message",
                            duration : 1000
                        });
                        var currentPage = jQuery('#phonebookGird').jqGrid('getGridParam', 'page');
                        var pageSize = jQuery('#phonebookGird').jqGrid('getGridParam', 'rowNum');
                        var totalCount = jQuery('#phonebookGird').jqGrid('getGridParam', 'records') - deletItemsCount;
                        var totalPages = Math.ceil(totalCount / pageSize);
                        jQuery("#phonebookGird").jqGrid('setGridParam', {
                            page : currentPage > totalPages ? totalPages : currentPage
                        }).trigger("reloadGrid");
                    }, function(error) {
                        alert(error);
                    });
                };
                phonebookSubmitForm = function(formId, type) {
                    var url = "phonebook/insert";
                    if (type == 'u') {
                        url = "phonebook/update";
                    }
                    var form = dijit.byId(formId);
                    if (form.isValid()) {
                        var json = JSON.stringify(form.getValues(), true);
                        syncDB(url, json);
                        form.hide();
                        topic.publish("phonebook/insertOrUpdate", formId);
                    } else {
                        form.validate();
                    }
                };
                phonebookDelete = function() {
                    var ids = jQuery("#phonebookGird").jqGrid('getGridParam', 'selarrrow') || [];
                    deletItemsCount = ids.length;
                    if (ids.length > 0) {
                        if (confirm('确认删除所选定的项？')) {
                            var phonebook = {};
                            phonebook.id = '';
                            array.forEach(ids, function(entry, i) {
                                phonebook.id += entry + ",";
                            });
                            syncDB("phonebook/delete", JSON.stringify(phonebook, true));
                        }
                    } else {
                        alert('请选择至少一条数据!');
                    }
                };
                phonebookQuery = function(formId) {
                    var phonebook = dijit.byId(formId).getValues();
                    jQuery("#phonebookGird").jqGrid('setGridParam', {
                        postData : phonebook
                    }).trigger('reloadGrid');
                };
            });
</script>
<div data-dojo-type="dijit/Dialog" id="phonebookIFD" title="新增">
  <div class="dijitDialogPaneContentArea">
    <table>
      <tr>
        <td><label for="fullname">姓名: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true, trim:true" type="text"
          name="fullname"></td>
      </tr>
      <tr>
        <td><label for="title">先生、女士、小姐: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true, trim:true" type="text"
          name="title"></td>
      </tr>
      <tr>
        <td><label for="birthday">出生日期: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true, trim:true" type="text"
          name="birthday"></td>
      </tr>
      <tr>
        <td><label for="nickname">昵称: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true, trim:true" type="text"
          name="nickname"></td>
      </tr>
      <tr>
        <td><label for="duty">职务: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true, trim:true" type="text"
          name="duty"></td>
      </tr>
      <tr>
        <td><label for="spouse">配偶: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true, trim:true" type="text"
          name="spouse"></td>
      </tr>
      <tr>
        <td><label for="childs">子女: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true, trim:true" type="text"
          name="childs"></td>
      </tr>
      <tr>
        <td><label for="companyname">单位名称: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true, trim:true" type="text"
          name="companyname"></td>
      </tr>
      <tr>
        <td><label for="companyaddress">单位地址: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true, trim:true" type="text"
          name="companyaddress"></td>
      </tr>
      <tr>
        <td><label for="companyphone">单位电话: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true, trim:true" type="text"
          name="companyphone"></td>
      </tr>
      <tr>
        <td><label for="companyfax">单位传真: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true, trim:true" type="text"
          name="companyfax"></td>
      </tr>
      <tr>
        <td><label for="homeaddress">家庭住址: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true, trim:true" type="text"
          name="homeaddress"></td>
      </tr>
      <tr>
        <td><label for="homezip">家庭邮编: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true, trim:true" type="text"
          name="homezip"></td>
      </tr>
      <tr>
        <td><label for="mobile">移动电话: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true, trim:true" type="text"
          name="mobile"></td>
      </tr>
      <tr>
        <td><label for="phone">固定电话: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true, trim:true" type="text"
          name="phone"></td>
      </tr>
      <tr>
        <td><label for="email">邮箱: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true, trim:true" type="text"
          name="email"></td>
      </tr>
      <tr>
        <td><label for="qq">QQ号码: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true, trim:true" type="text"
          name="qq"></td>
      </tr>
      <tr>
        <td><label for="msn">MSN: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true, trim:true" type="text"
          name="msn"></td>
      </tr>
      <tr>
        <td><label for="note">备注: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true, trim:true" type="text"
          name="note"></td>
      </tr>
      <tr>
        <td><label for="userid">用户ID: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true, trim:true" type="text"
          name="userid"></td>
      </tr>
      <tr>
        <td><label for="groupid">联系人分组ID: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true, trim:true" type="text"
          name="groupid"></td>
      </tr>
      <tr>
        <td><label for="isshared">是否共享：1=共享、0=私有: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true, trim:true" type="text"
          name="isshared"></td>
      </tr>
    </table>
  </div>
  <div class="dijitDialogPaneActionBar">
    <button data-dojo-type="dijit/form/Button" type="button" onclick="phonebookSubmitForm('phonebookIFD','i')">保存</button>
    <button data-dojo-type="dijit/form/Button" type="button" onclick="phonebookRestForm('phonebookIFD');">重置</button>
  </div>
</div>
<div data-dojo-type="dijit/Dialog" id="phonebookUFD" title="更新">
  <div class="dijitDialogPaneContentArea">
    <input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true, readOnly: true" type="text"
      name="phoneid" style="display: none;">
    <table>
      <tr>
        <td><label for="fullname">姓名: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true" type="text"
          name="fullname"></td>
      </tr>
      <tr>
        <td><label for="title">先生、女士、小姐: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true" type="text"
          name="title"></td>
      </tr>
      <tr>
        <td><label for="birthday">出生日期: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true" type="text"
          name="birthday"></td>
      </tr>
      <tr>
        <td><label for="nickname">昵称: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true" type="text"
          name="nickname"></td>
      </tr>
      <tr>
        <td><label for="duty">职务: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true" type="text"
          name="duty"></td>
      </tr>
      <tr>
        <td><label for="spouse">配偶: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true" type="text"
          name="spouse"></td>
      </tr>
      <tr>
        <td><label for="childs">子女: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true" type="text"
          name="childs"></td>
      </tr>
      <tr>
        <td><label for="companyname">单位名称: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true" type="text"
          name="companyname"></td>
      </tr>
      <tr>
        <td><label for="companyaddress">单位地址: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true" type="text"
          name="companyaddress"></td>
      </tr>
      <tr>
        <td><label for="companyphone">单位电话: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true" type="text"
          name="companyphone"></td>
      </tr>
      <tr>
        <td><label for="companyfax">单位传真: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true" type="text"
          name="companyfax"></td>
      </tr>
      <tr>
        <td><label for="homeaddress">家庭住址: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true" type="text"
          name="homeaddress"></td>
      </tr>
      <tr>
        <td><label for="homezip">家庭邮编: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true" type="text"
          name="homezip"></td>
      </tr>
      <tr>
        <td><label for="mobile">移动电话: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true" type="text"
          name="mobile"></td>
      </tr>
      <tr>
        <td><label for="phone">固定电话: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true" type="text"
          name="phone"></td>
      </tr>
      <tr>
        <td><label for="email">邮箱: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true" type="text"
          name="email"></td>
      </tr>
      <tr>
        <td><label for="qq">QQ号码: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true" type="text"
          name="qq"></td>
      </tr>
      <tr>
        <td><label for="msn">MSN: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true" type="text"
          name="msn"></td>
      </tr>
      <tr>
        <td><label for="note">备注: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true" type="text"
          name="note"></td>
      </tr>
      <tr>
        <td><label for="userid">用户ID: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true" type="text"
          name="userid"></td>
      </tr>
      <tr>
        <td><label for="groupid">联系人分组ID: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true" type="text"
          name="groupid"></td>
      </tr>
      <tr>
        <td><label for="isshared">是否共享：1=共享、0=私有: </label></td>
        <td><input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true" type="text"
          name="isshared"></td>
      </tr>
    </table>
  </div>
  <div class="dijitDialogPaneActionBar">
    <button data-dojo-type="dijit/form/Button" type="button" onclick="phonebookSubmitForm('phonebookUFD','u')">保存</button>
    <button data-dojo-type="dijit/form/Button" type="button" onclick="phonebookRestForm('phonebookUFD');">重置</button>
  </div>
</div>
<fieldset>
  <legend>&nbsp;&nbsp;信息选项&nbsp;&nbsp;</legend>
  <form id="queryPhonebookForm" data-dojo-type="dijit/form/Form" method="post">
    <div style="margin-left: 5px;">
      <table>
        <tr>
          <td><label for="fullname">姓名: </label></td>
          <td><input data-dojo-type="dijit/form/TextBox" data-dojo-props="trim: true" type="text" name="fullname"></td>
        </tr>
        <tr>
          <td><label for="title">先生、女士、小姐: </label></td>
          <td><input data-dojo-type="dijit/form/TextBox" data-dojo-props="trim: true" type="text" name="title"></td>
        </tr>
        <tr>
          <td><label for="birthday">出生日期: </label></td>
          <td><input data-dojo-type="dijit/form/TextBox" data-dojo-props="trim: true" type="text" name="birthday"></td>
        </tr>
        <tr>
          <td><label for="nickname">昵称: </label></td>
          <td><input data-dojo-type="dijit/form/TextBox" data-dojo-props="trim: true" type="text" name="nickname"></td>
        </tr>
        <tr>
          <td><label for="duty">职务: </label></td>
          <td><input data-dojo-type="dijit/form/TextBox" data-dojo-props="trim: true" type="text" name="duty"></td>
        </tr>
        <tr>
          <td><label for="spouse">配偶: </label></td>
          <td><input data-dojo-type="dijit/form/TextBox" data-dojo-props="trim: true" type="text" name="spouse"></td>
        </tr>
        <tr>
          <td><label for="childs">子女: </label></td>
          <td><input data-dojo-type="dijit/form/TextBox" data-dojo-props="trim: true" type="text" name="childs"></td>
        </tr>
        <tr>
          <td><label for="companyname">单位名称: </label></td>
          <td><input data-dojo-type="dijit/form/TextBox" data-dojo-props="trim: true" type="text" name="companyname"></td>
        </tr>
        <tr>
          <td><label for="companyaddress">单位地址: </label></td>
          <td><input data-dojo-type="dijit/form/TextBox" data-dojo-props="trim: true" type="text" name="companyaddress"></td>
        </tr>
        <tr>
          <td><label for="companyphone">单位电话: </label></td>
          <td><input data-dojo-type="dijit/form/TextBox" data-dojo-props="trim: true" type="text" name="companyphone"></td>
        </tr>
        <tr>
          <td><label for="companyfax">单位传真: </label></td>
          <td><input data-dojo-type="dijit/form/TextBox" data-dojo-props="trim: true" type="text" name="companyfax"></td>
        </tr>
        <tr>
          <td><label for="homeaddress">家庭住址: </label></td>
          <td><input data-dojo-type="dijit/form/TextBox" data-dojo-props="trim: true" type="text" name="homeaddress"></td>
        </tr>
        <tr>
          <td><label for="homezip">家庭邮编: </label></td>
          <td><input data-dojo-type="dijit/form/TextBox" data-dojo-props="trim: true" type="text" name="homezip"></td>
        </tr>
        <tr>
          <td><label for="mobile">移动电话: </label></td>
          <td><input data-dojo-type="dijit/form/TextBox" data-dojo-props="trim: true" type="text" name="mobile"></td>
        </tr>
        <tr>
          <td><label for="phone">固定电话: </label></td>
          <td><input data-dojo-type="dijit/form/TextBox" data-dojo-props="trim: true" type="text" name="phone"></td>
        </tr>
        <tr>
          <td><label for="email">邮箱: </label></td>
          <td><input data-dojo-type="dijit/form/TextBox" data-dojo-props="trim: true" type="text" name="email"></td>
        </tr>
        <tr>
          <td><label for="qq">QQ号码: </label></td>
          <td><input data-dojo-type="dijit/form/TextBox" data-dojo-props="trim: true" type="text" name="qq"></td>
        </tr>
        <tr>
          <td><label for="msn">MSN: </label></td>
          <td><input data-dojo-type="dijit/form/TextBox" data-dojo-props="trim: true" type="text" name="msn"></td>
        </tr>
        <tr>
          <td><label for="note">备注: </label></td>
          <td><input data-dojo-type="dijit/form/TextBox" data-dojo-props="trim: true" type="text" name="note"></td>
        </tr>
        <tr>
          <td><label for="userid">用户ID: </label></td>
          <td><input data-dojo-type="dijit/form/TextBox" data-dojo-props="trim: true" type="text" name="userid"></td>
        </tr>
        <tr>
          <td><label for="groupid">联系人分组ID: </label></td>
          <td><input data-dojo-type="dijit/form/TextBox" data-dojo-props="trim: true" type="text" name="groupid"></td>
        </tr>
        <tr>
          <td><label for="isshared">是否共享：1=共享、0=私有: </label></td>
          <td><input data-dojo-type="dijit/form/TextBox" data-dojo-props="trim: true" type="text" name="isshared"></td>
        </tr>
      </table>
    </div>
  </form>
  <div style="padding: 5px;">
    <button id="phonebookInsertBtn" data-dojo-type="dijit/form/Button" type="submit" label="新增">
      <script type="dojo/method" event="onClick" args="evt">
        dijit.byId('phonebookIFD').show();
      </script>
    </button>
    <button id="phonebookDeleteBtn" data-dojo-type="dijit/form/Button" type="button" label="删除" onclick="phonebookDelete();"></button>
    <button id="phonebookUpdateBtn" data-dojo-type="dijit/form/Button" type="button" label="更新">
      <script type="dojo/method" event="onClick" args="evt">
        var ids = jQuery("#phonebookGird").jqGrid('getGridParam', 'selarrrow') || [];
        if (ids.length != 1) {
          alert('每次只能修改一条数据!');
        }else{
          var phonebook = jQuery("#phonebookGird").jqGrid('getRowData', ids[0]);
          dijit.byId('phonebookUFD').setValues(phonebook);
          dijit.byId('phonebookUFD').show();
        }
      </script>
    </button>
    <button id="phonebookQueryBtn" data-dojo-type="dijit/form/Button" type="button" label="查询"
      onclick="phonebookQuery('queryPhonebookForm');"></button>
  </div>
</fieldset>
<div id="gird">
  <table id="phonebookGird"></table>
  <div id="phonebookToolbar"></div>
</div>
<script type="text/javascript">
    jQuery("#phonebookGird").jqGrid({
        url : 'phonebook/queryAsList',
        datatype : "json",
        autowidth : true,
        rownumbers : true,
        height : 'auto',
        colNames : [
          '通讯簿ID',
          '姓名',
          '先生、女士、小姐',
          '出生日期',
          '昵称',
          '职务',
          '配偶',
          '子女',
          '单位名称',
          '单位地址',
          '单位电话',
          '单位传真',
          '家庭住址',
          '家庭邮编',
          '移动电话',
          '固定电话',
          '邮箱',
          'QQ号码',
          'MSN',
          '备注',
          '用户ID',
          '联系人分组ID',
          '是否共享：1=共享、0=私有'
        ],
        colModel : [ 
        {
          name : 'phoneid',
          index : 'phoneid',
          width : 60,
          key : true,
          hidden : true,
          align : 'center'
        },
        {
          name : 'fullname',
          index : 'fullname',
          width : 60
        },
        {
          name : 'title',
          index : 'title',
          hidden : true          
        },
        {
          name : 'birthday',
          index : 'birthday',
          hidden : true 
        },
        {
          name : 'nickname',
          index : 'nickname',
          hidden : true    
        },
        {
          name : 'duty',
          index : 'duty',
          hidden : true   
        },
        {
          name : 'spouse',
          index : 'spouse',
          hidden : true 
        },
        {
          name : 'childs',
          index : 'childs',
          hidden : true
        },
        {
          name : 'companyname',
          index : 'companyname',
          hidden : true
        },
        {
          name : 'companyaddress',
          index : 'companyaddress',
          hidden : true
        },
        {
          name : 'companyphone',
          index : 'companyphone',
          hidden : true
        },
        {
          name : 'companyfax',
          index : 'companyfax',
          hidden : true
        },
        {
          name : 'homeaddress',
          index : 'homeaddress',
          hidden : true
        },
        {
          name : 'homezip',
          index : 'homezip',
          hidden : true
        },
        {
          name : 'mobile',
          index : 'mobile'
        },
        {
          name : 'phone',
          index : 'phone'
        },
        {
          name : 'email',
          index : 'email'
        },
        {
          name : 'qq',
          index : 'qq',
          width : 60
        },
        {
          name : 'msn',
          index : 'msn'
        },
        {
          name : 'note',
          index : 'note',
          hidden : true
        },
        {
          name : 'userid',
          index : 'userid',
          hidden : true
        },
        {
          name : 'groupid',
          index : 'groupid',
          hidden : true
        },
        {
          name : 'isshared',
          index : 'isshared',
          hidden : true
        }
        ],
        rowNum : 15,
        rowList : [ 15, 20, 25, 30 ],
        pager : '#phonebookToolbar',
        // sortname : 'username',
        recordpos : 'right',
        viewrecords : true,
        sortorder : "desc",
        jsonReader : {
            repeatitems : false
        },
        multiselect : true,
        shrinkToFit : false,
        caption : "通讯簿列表"
    });
    jQuery("#phonebookGird").jqGrid('navGrid', '#phonebookToolbar', {
        edit : false,
        add : false,
        del : false,
        search : false,
        refresh : true
    });
</script>
